<template>
  <div class="app-container home">

    <!--    &lt;!&ndash; 指标基本信息label 开始  &ndash;&gt;-->
    <!--    <div>-->
    <!--      <div class="header">-->
    <!--        <span class="headerIcon">|</span>-->
    <!--        <span class="headerText">主管院级领导评分</span>-->
    <!--      </div>-->
    <!--    </div>-->
    <!--    &lt;!&ndash; 指标基本信息label 结束  &ndash;&gt;-->
    <!--    &lt;!&ndash; 指标基本信息label 开始  &ndash;&gt;-->
    <!--    <div>-->
    <!--      <div class="header">-->
    <!--        <span class="headerIcon">|</span>-->
    <!--        <span class="headerText">其他院级领导评分</span>-->
    <!--      </div>-->
    <!--    </div>-->
    <!--    &lt;!&ndash; 指标基本信息label 结束  &ndash;&gt;-->
    <!--    &lt;!&ndash; 指标基本信息label 开始  &ndash;&gt;-->
    <!--    <div>-->
    <!--      <div class="header">-->
    <!--        <span class="headerIcon">|</span>-->
    <!--        <span class="headerText">网上测评得分</span>-->
    <!--      </div>-->
    <!--    </div>-->
    <!--    &lt;!&ndash; 指标基本信息label 结束  &ndash;&gt;-->
    <!--    &lt;!&ndash; 指标基本信息label 开始  &ndash;&gt;-->
    <!--    <div>-->
    <!--      <div class="header">-->
    <!--        <span class="headerIcon">|</span>-->
    <!--        <span class="headerText">十三个教学部门党政负责人评分</span>-->
    <!--      </div>-->
    <!--    </div>-->
    <!--    &lt;!&ndash; 指标基本信息label 结束  &ndash;&gt;-->
    <!--    &lt;!&ndash; 指标基本信息label 开始  &ndash;&gt;-->
    <!--    <div>-->
    <!--      <div class="header">-->
    <!--        <span class="headerIcon">|</span>-->
    <!--        <span class="headerText">部门处级干部评分</span>-->
    <!--      </div>-->
    <!--    </div>-->
    <!--    &lt;!&ndash; 指标基本信息label 结束  &ndash;&gt;-->

    <!--  详情 开始  -->
    <div class="detailForm">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="部门年度考核得分" name="部门年度考核得分">
          <!-- 指标基本信息label 开始  -->
          <div>
            <div class="header">
              <span class="headerIcon">|</span>
              <span class="headerText">部门年度考核得分</span>
            </div>
          </div>
          <!-- 指标基本信息label 结束  -->
          <p style="color:#666666;">您可以使用下面表格修改部门年度考核得分结果，系统会将基本数据存储后作为考评依据</p>
          <!--              <el-button type="primary" @click="openUploadView">点击上传<i class="el-icon-upload el-icon&#45;&#45;right"></i>-->
          <!--              </el-button>-->
          <el-button type="primary" style="margin-bottom: 5px;" @click="addNewPart">添加</el-button>
<!--          <div class="fileList">-->
<!--            <div v-for="(item,index) in form.projectFile" class="file">-->
<!--              &lt;!&ndash;                  <div class="del_img" @click="del_file(index)">-->
<!--                                  <img src="../../../assets/images/project/del.svg" style="width: 100%;height: 100%;">-->
<!--                                </div>&ndash;&gt;-->
<!--              <div class="file_img1">-->
<!--                <img v-if="item.type == 'xls'" src="../../../assets/images/project/excel.png">-->
<!--                <img v-if="item.type == 'xlsx'" src="../../../assets/images/project/excel.png">-->
<!--                <img v-else-if="item.type == 'doc'" src="../../../assets/images/project/word.png">-->
<!--                <img v-else-if="item.type == 'docx'" src="../../../assets/images/project/word.png">-->
<!--                <img v-else-if="item.type == 'ppt'" src="../../../assets/images/project/ppt.png">-->
<!--                <img v-else-if="item.type == 'pptx'" src="../../../assets/images/project/ppt.png">-->
<!--                <img v-else-if="item.type == 'pdf'" src="../../../assets/images/project/pdf.png">-->
<!--                <img v-else-if="item.type == 'txt'" src="../../../assets/images/project/txt.png">-->
<!--                <img v-else-if="item.type == 'rar'" src="../../../assets/images/project/zip.png">-->
<!--                <img v-else-if="item.type == 'zip'" src="../../../assets/images/project/zip.png">-->
<!--                <img v-else-if="item.type == 'avi'" src="../../../assets/images/project/mov.png">-->
<!--                <img v-else-if="item.type == 'mp4'" src="../../../assets/images/project/mov.png">-->
<!--                <img-->
<!--                  v-else-if="item.type == 'jpg'||item.type == 'jpeg'||item.type == 'png'||item.type == 'gif'||item.type == 'bmp'"-->
<!--                  :src="item.name==undefined?'../../../assets/images/project/jpg.png':uploadUrl+'/projectcenter/temp'+item.base64File"-->
<!--                >-->
<!--                <img v-else src="../../../assets/images/project/other.png" style="width: 100%;height: 100%;">-->
<!--              </div>-->
<!--              <div class="file_name1">-->
<!--                {{ item.name }}.{{ item.type }}-->
<!--                <br/>-->
<!--                <el-link type="primary" @click="del_file(index)"> 移除</el-link>-->
<!--              </div>-->
<!--            </div>-->
<!--          </div>-->
          <el-table
            :data="tableData"
            style="width: 100%">
            <el-table-column
              prop="sid"
              label="序号"
              width="180">
            </el-table-column>
            <el-table-column
              prop="dept_name"
              label="部门"
              width="180">
            </el-table-column>
            <el-table-column
              prop="score"
              label="分数">
            </el-table-column>
            <el-table-column>
              <template slot-scope="scope">
                <el-button type="primary" @click="tomodifyDeptscore(scope.row)">修改</el-button>
                <el-button type="primary" @click="todelDeptscore(scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="主管院级领导评分" name="主管院级领导评分">
          <panel1></panel1>
        </el-tab-pane>
        <el-tab-pane label="其他院级领导评分" name="其他院级领导评分">
          <panel2></panel2>
        </el-tab-pane>
        <el-tab-pane label="网上测评得分" name="网上测评得分">
          <panel3></panel3>
        </el-tab-pane>
        <el-tab-pane label="十三个教学部门党政负责人评分" name="十三个教学部门党政负责人评分">
          <panel4></panel4>
        </el-tab-pane>
        <el-tab-pane label="部门处级干部评分" name="部门处级干部评分">
          <panel5></panel5>
        </el-tab-pane>
        <el-tab-pane label="述职报告管理" name="述职报告管理">
          <!-- 指标基本信息label 开始  -->
          <div>
            <div class="header">
              <span class="headerIcon">|</span>
              <span class="headerText">述职报告管理</span>
            </div>
          </div>
          <!-- 指标基本信息label 结束  -->
          <p style="color:#666666;">您可以在这里管理述职报告</p>
          <el-button type="primary" style="margin-bottom: 5px;" @click="addNewReport">添加报告</el-button>
          <el-table
            :data="reports"
            style="width: 100%">
            <el-table-column
              prop="index"
              label="序号"
              width="80">
            </el-table-column>
            <el-table-column
              prop="report"
              label="述职报告">
            </el-table-column>
            <el-table-column width="200">
              <template slot-scope="scope">
                <el-button type="primary" @click="todelReport(scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>

    </div>
    <!--上传附件弹出框 -->
    <el-dialog :visible.sync="uploadVisible" center center title="文件上传" width="60%" @close="handlerClose">
      <UploadBigFile :inputFile="inputFile" :myvisible="uploadVisible" class="uploadSlot"></UploadBigFile>
    </el-dialog>
  </div>
</template>

<script>

  import $ from 'jquery'
  import UploadBigFile from './Upload'
  import * as kaopingService from '@/api/dangjian/kaopingService'
  import Panel1 from './components/panel1'
  import Panel2 from './components/panel2'
  import Panel3 from './components/panel3'
  import Panel4 from './components/panel4'
  import Panel5 from './components/panel5'

  export default {
    name: 'index',
    components: {
      Panel1,
      Panel2,
      Panel3,
      Panel4,
      Panel5,
      UploadBigFile
    },
    data() {
      return {
        activeName: '部门年度考核得分',
        uploadVisible: false,
        inputFile: [],
        tableData: [
          { sid: 1, dept_name: '党政办公室', score: 90.25 },
          { sid: 2, dept_name: '信息工程学院', score: 89.46 },
          { sid: 3, dept_name: '土木工程学院', score: 89.45 },
          { sid: 4, dept_name: '党委组织部、统战部', score: 89.42 },
          { sid: 5, dept_name: '工会', score: 89.06 },
          { sid: 6, dept_name: '商贸与流通学院', score: 88.99 },
          { sid: 7, dept_name: '人事处', score: 88.92 },
          { sid: 8, dept_name: '财经与旅游学院', score: 88.83 },
          { sid: 9, dept_name: '科研处、技术转移中心', score: 88.72 },
          { sid: 10, dept_name: '党委宣传部', score: 88.59 },
          { sid: 11, dept_name: '电气工程学院', score: 88.56 },
          { sid: 12, dept_name: '材料工程学院', score: 88.35 },
          { sid: 13, dept_name: '航空工程学院', score: 88.23 },
          { sid: 14, dept_name: '马克思主义学院', score: 88.22 },
          { sid: 15, dept_name: '纪委综合室、监督检查室', score: 88.14 },
          { sid: 16, dept_name: '教务处', score: 88.07 },
          { sid: 17, dept_name: '汽车工程学院', score: 88.04 },
          { sid: 18, dept_name: '财务处', score: 87.98 },
          { sid: 19, dept_name: '信息化与网络安全处', score: 87.97 },
          { sid: 20, dept_name: '机械工程学院', score: 87.9 },
          { sid: 21, dept_name: '学工部（学生处）', score: 87.82 },
          { sid: 22, dept_name: '化工与纺织服装学院', score: 87.8 },
          { sid: 23, dept_name: '就业指导处、校企合作处', score: 87.78 },
          { sid: 24, dept_name: '基建处', score: 87.7 },
          { sid: 25, dept_name: '团委', score: 87.65 },
          { sid: 26, dept_name: '发展规划处、高职教育研究所', score: 87.64 },
          { sid: 27, dept_name: '后勤保障处', score: 87.62 },
          { sid: 28, dept_name: '“双高”建设办公室', score: 87.56 },
          { sid: 29, dept_name: '继续教育与培训学院', score: 87.5 },
          { sid: 30, dept_name: '国资处', score: 87.39 },
          { sid: 31, dept_name: '审计处', score: 87.19 },
          { sid: 32, dept_name: '美育部', score: 87.15 },
          { sid: 33, dept_name: '教育教学质量管理中心', score: 87.1 },
          { sid: 34, dept_name: '图书馆', score: 87.1 },
          { sid: 35, dept_name: '公共课教学部', score: 87.02 },
          { sid: 36, dept_name: '国际教育学院', score: 86.98 },
          { sid: 37, dept_name: '体育部', score: 86.87 },
          { sid: 38, dept_name: '产业管理处', score: 85.47 },
          { sid: 39, dept_name: '保卫处', score: 85.23 },
          { sid: 40, dept_name: '离退休工作处', score: 84.93 }
        ],
        reports:[]
      }
    },
    methods: {
      handleClick() {

      },
      handlerClose() {

      },
      openUploadView() {
        this.uploadVisible = true
        this.inputFile = []
      },
      loadData() {
        var that = this
        kaopingService.getDeptScore({}).then(response => {
          that.tableData = JSON.parse(response.msg)
        })
      },
      tomodifyDeptscore(row) {
        var that = this
        that.$prompt('当前部门：' + row.dept_name + ',请输入部门测评成绩', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消'
        }).then(({ value }) => {
          var score=value;
          if (score == '') {
            that.$message.error('请填写部门成绩！')
            return
          }
          kaopingService.addNewPartScore({
            deptName: row.dept_name,
            score: score
          }).then(response => {
            if (response.code == 200) {
              that.loadData()
            } else {
              that.$message.error(response.msg)
            }
          })
        })

      },
      todelDeptscore(row) {
        var that = this
        this.$alert('确定删除指定的部门信息么？', '询问', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          callback: action => {
            if ('confirm' == action) {
              //确定
              var para = {
                dept_name: row.dept_name
              }
              kaopingService.deleteDeptScore(para).then(response => {
                that.loadData()
              })
            }
          }
        })
      },
      addNewPart() {
        var that = this
        that.$prompt('请输入部门全称', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消'
        }).then(({ value }) => {
          console.log("--------=="+value)
          var deptName=value;
          if (deptName == '') {
            that.$message.error('请填写部门名称！')
            return
          }

          that.$prompt('请输入部门测评成绩', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消'
          }).then(({ value }) => {
            var score=value;
            if (score == '') {
              that.$message.error('请填写部门成绩！')
              return
            }
            var para={
              deptName: deptName,
              score: score
            }
            console.log("--------"+JSON.stringify(para))
            kaopingService.addNewPartScore(para).then(response => {
              if (response.code == 200) {
                that.loadData()
              } else {
                that.$message.error(response.msg)
              }
            })
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '出错了，取消输入'
          })
        })
      },
      addNewReport(){
        this.uploadVisible = true
        this.inputFile = []
      },
      todelReport(row){
        var that=this;
        that.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          console.log("删除")
          kaopingService.deleteRaports(row).then(response => {
            if (response.code == 200) {
              that.loadRaports();
            } else {
              that.$message.error(response.msg)
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      loadRaports(){
        var that=this;
        kaopingService.loadRaports().then(response => {
          if (response.code == 200) {
            that.reports=response.data;
          } else {
            that.$message.error(response.msg)
          }
        })
      },
      closeDialog(inputFile) {//此方法供弹窗内部调用
        var that=this;
        console.log("确定后已返回文件名："+JSON.stringify(inputFile));
        this.uploadVisible = false
        if (inputFile == null || inputFile == undefined || inputFile.length == 0) {
          return
        } else {
            //将缓存文件转移到指定目录
          kaopingService.moveRaport({
            inputFile:inputFile
          }).then(response => {
            that.handlerClose(inputFile)
          });
        }
      },
      // 关闭上传文件弹出框时触发
      handlerClose(inputFile) {
        var that = this
        if (inputFile == null || inputFile == undefined || inputFile.length == 0) {
          that.$message.error("上传失败");
          return
        }else{
          that.$message.success("上传成功");
          that.loadRaports();
        }
        inputFile = []//不知道这东西现在指向谁，用完之火清空
        that.inputFile = []
      },
    },
    mounted() {
      this.loadData();
      this.loadRaports();
    }
  }
</script>

<style scoped>
  .header {
    /*border-bottom: 2px solid lightgrey;*/
    padding: 10px 10px 10px 0px;
  }

  .headerIcon {
    color: #00afff;
    font-weight: 900;
    font-size: 22px;
  }

  .headerText {
    font-weight: 600;
    font-size: 16px;
    padding-left: 10px;
  }

  .table_item {
    display: inline-block;
    vertical-align: middle;
    padding: 10px 20px;
  }

  .table_item_true {
    border-bottom: 3px solid #00afff;
  }

  .form_box {
    width: 100%;
    padding: 10px 30px;
  }

  .title {
    margin: 10px 0;
    font-size: 16px;
    color: rgb(45, 169, 250);
  }

  .title1 {
    margin: 10px 0;
    font-size: 14px;
    color: rgb(45, 169, 250);
  }

  .form_content {
    font-size: 14px;
  }

  .form_content::after {
    display: block;
    content: "";
    clear: both;
  }

  .form_content_item {
    width: 50%;
    float: left;
  }

  .form_content_item2 {
    width: 100%;
    float: left;
  }

  .form_content_item3 {
    width: 100%;
    float: left;
  }

  .uploadSlot {
    margin: -10px 10px 10px 30px;
  }
</style>
